<script setup lang="ts">
import { ref, watch } from 'vue';

// 定义接收的 props
interface ScrollBoardProps {
  chartData: {
    header: string[]; // 表头
    data: string[][]; // 表格数据
  };
}

const props = defineProps<ScrollBoardProps>();

// 配置表格的默认值
const config = ref({
  header: props.chartData.header || [],
  data: props.chartData.data || [],
  align: ['center', 'center', 'center', 'center', 'center'], // 默认居中对齐
  headerBGColor: '#0f1325', // 表头背景色
  columnWidth: [80], // 列宽
  headerHeight: 35, // 表头高度
  rowNum: 8, // 显示行数
});

// 监听 props 数据变化，动态更新配置
watch(
  () => props.chartData,
  (newChartData) => {
    config.value = {
      ...config.value,
      header: newChartData.header || [],
      data: newChartData.data || [],
    };
  },
  { deep: true }
);
</script>

<template>
  <div style="padding: 0 5px; box-sizing: border-box; height: calc(100% - 50px)">
    <dv-scroll-board :config="config" />
  </div>
</template>